<template>
    <div class="related-circles clearfix">
        <div class="related">
            <p>相关圈子: <span>换一换</span></p>
            <ul class="clearfix">
                <li><img src="../../assets/meirong1.jpg" alt=""><p>鼻部</p></li>
                <li><img src="../../assets/meirong1.jpg" alt=""><p>鼻部</p></li>
                <li><img src="../../assets/meirong1.jpg" alt=""><p>鼻部</p></li>
                <li><img src="../../assets/meirong1.jpg" alt=""><p>鼻部</p></li>
            </ul>
            <span>发布</span>
            <span>喜欢</span>
        </div>
     <div class="fenxiang clearfix">
         <ul>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
             <li><img src="../../assets/meirong1.jpg" alt=""></li>
         </ul>
     </div>
    </div>
</template>

<script>
    export default {
        name: "RelatedCircles"
    }
</script>

<style scoped lang="less">
    @import "../../style/style.less";
    .related-circles{
        .related{
            p{
                font-size: 14px;
                color: #333333;
                padding-bottom: 10px;
                span{
                    color: @theme-color-dark;
                    font-size: 14px;
                    float: right;
                }
            }
            ul{
                margin-left: 5px;
                li{
                    margin-right: 21px;
                    float: left;
                    text-align: center;
                    font-size: 14px;
                    color: #666666;
                    img{
                        width: 64px;
                        height: 64px;
                        border-radius: 50%;
                    }
                }
            }
            >span{
                display: block;
                width: 113px;
                height: 45px;
                background-color: @theme-color-dark;
                border-radius: 4px;
                border-bottom: 5px solid #FE5371;
                color: white;
                text-align: center;
                line-height: 45px;
                float: left;
                margin-right: 30px;
                font-size: 18px;
            }
            >:last-child{
                margin-right: 0px;
            }

        }

        .fenxiang{
            ul{
                >:nth-child(5n+5){
                    margin-right: 0;
                }
                li{
                    float: left;
                    margin-right: 12px;
                    margin-top: 20px;
                    img{
                        width: 42px;
                        height: 42px;
                        border-radius: 50%;
                    }
                }
            }
        }
    }

</style>